<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <!--
        事件修饰符：
            1.prevent：阻止默认行为(常用)
            2.stop：阻止事件冒泡(常用)
            3.once：事件只触发一次(常用)
            4.capture：事件以捕获的方式触发
            5.self：只有event.target是当前元素时才触发，否则不触发      
            6.passive：事件的默认行为立即执行，无序等待时间回调执行完毕
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 阻止默认行为 -->
        <a :href="url" @click.prevent="showMsg">阻止默认行为</a><hr>
        <!-- 阻止事件冒泡 -->
         <div class="stop" @click="showData2"> 
            <button  @click.stop="showMsg">阻止事件冒泡</button>
        </div><hr>
        <!-- 事件只触发一次 -->
         <button @click.once="showMsg">只触发一次</button> <hr>
        <!-- 事件以捕获的方式触发 -->
         <div class="buhuo1" @click.capture="showData1">
            外层
            <div class="buhuo2">
                <button @click="showData2">内层</button>
            </div>
         </div>
         <hr>
         <!-- 只有event.target是当前元素时才触发 -->
         <div @click.self="showData1">
             <button @click="showData2">只有event.target是当前元素时才触发</button>
         </div>
         <hr>
         <!-- 事件默认行为立即执行，无序等待时间回调执行完毕 -->
          <!-- 使用wheel事件，使用passive属性，默认为false，设置为true，事件默认行为立即执行，无序等待时间回调执行完毕 -->
           <!-- 使用scroll事件，不会等待时间回调执行完毕，立即执行，-->
         <ul @wheel.passive="getData">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
         </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: '事件修饰符',
                url:"https://www.baidu.com/"
            }
        },
        methods:{
            showMsg(){
               // event.preventDefault()//阻止默认行为，如跳转网页,@click.prevent等价于这个方法
                alert('点击了链接')
            },
            showData1(){
               // event.preventDefault()//阻止默认行为，如跳转网页,@click.prevent等价于这个方法
                alert('1')
            },
            showData2(){
               // event.preventDefault()//阻止默认行为，如跳转网页,@click.prevent等价于这个方法
                alert('2')
            },
            getData(){
                for(let i=0;i<100000;i++){
                    console.log('@')
                }
            }
        }
    })
</script>
<style>
    /* 全局样式，间隔5px */
    *{
        margin-top: 20px;
    }
    .stop{
        width: 200px;
        height: 50px;
        background-color: red;
    }
    .buhuo1{
        padding: 5px;
        width: 200px;
        height: 50px;
        background-color: red;
    }
    .buhuo2{
        padding: 5px;
        width: 200px;
        height: 50px;
        background-color: blue;
    }
    ul{
        overflow: auto;
        height: 200px;
        width: 200px;
    }
    li{
        height: 50px;
 
    }
</style>
</html>